<template>
    <div class="turnover">

        <div class="top">
            <span>人员流动</span>
            <img style="margin-left: 10px;" src="../../assets/images/Combined Shape.png" alt="">
        </div>
        <div class="box">
            <div class="box_left">
                <img src="../../assets/images/right_yestErday.png" alt="">
                <div style="float: right;">
                    <p>1</p>
                    <p>昨日外来访客</p>
                </div>
            </div>
            <div class="box_right">
                <img src="../../assets/images/right_Today.png" alt="">
                <div style="float: right;">
                    <p>1</p>
                    <p>昨日外来访客</p>
                </div>
            </div>
        </div>
        <div class="boxc">
            <div id="main2" style="width: 100%;height:100%"></div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
    var app = {};

    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['2015', '2016', '2017'],
                ['Matcha Latte', 43.3, 85.8],
                [' Tea', 83.1, 73.4],
                ['Cocoa', 86.4, 65.2],
                ['Brownie', 72.4, 53.9]
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        barWidth: 16,
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

    option && myChart.setOption(option);

})
</script>

<style scoped lang="scss">
.turnover {
    width: 100%;

    .top {
        width: 100%;
        height: 40px;
        background-image: url("../../assets/images/you.png");
        background-size: 100% 100%;
        color: #91a6ff;
        font-weight: bold;
        display: flex;
        align-items: center;
        font-size: 18px;

        span {
            text-indent: 20px;
        }
    }

    .box {
        width: 100%;
        height: 70px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        .box_left {
            height: 100%;
            width: 220px;
            background-image: url("../../assets/images/编组 40.png");
            background-size: 100% 100%;
            font-size: 14px;
            text-align: center;
            color: #ccc;

            p {
                margin-top: 8px;
            }

            img {
                width: 50px;
                height: 50px;
            }
        }

        .box_right {
            height: 100%;
            width: 220px;
            background-image: url("../../assets/images/编组 40.png");
            background-size: 100% 100%;
            font-size: 14px;
            text-align: center;
            color: #ccc;

            p {
                margin-top: 8px;
            }

            img {
                width: 50px;
                height: 50px;
            }
        }
    }

    .boxc {
        width: 450px;
        height: 270px;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 10px;
    }
}
</style>